for (let color of ['red', 'green', 'blue']) {
  const div = document.createElement('div');
  const shadowDOM = div.attachShadow({ mode: 'open' });

  document.body.appendChild(div);

  shadowDOM.innerHTML = `
    <p>Make me ${color}</p>

    <style>
    p {
      color: ${color};
    }
    </style>
  `;
}

function countP(node) {
  console.log(node.querySelectorAll('p').length);
}

countP(document);  // 0

for (let element of document.querySelectorAll('div')) {
  countP(element.shadowRoot);
}

// 1
// 1
// 1
